<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import request from "@/utils/request2";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores'

const pageNum = ref(1)
const pageSize = ref(5)
const tableData = ref([])
const menuData = ref([])
const total = ref(0)
const form = reactive({})
const multipleSelection = ref([])
const name = ref("")
const roleId = ref(0)
const roleFlag = ref("")
const dialogFormVisible = ref(false)
const menuDialogVis = ref(false)
const props = reactive({
  label: 'name',
})
const expends = ref([])
const checks = ref([])
const ids = ref([])
const tree = ref(null)

const userStore = useUserStore()

const saveMenuRole = () => {
  request.post("/role/roleMenu/" + roleId.value, tree.value.getCheckedKeys()).then(res => {
    if (res.code === '200') {
      ElMessage.success("绑定成功")
      menuDialogVis.value = false

      // 操作管理员角色后需要重新登录
      if (roleFlag.value === 'ROLE_ADMIN') {
        userStore.logout()
      }

    } else {
      ElMessage.error(res.msg)
    }
  })
}

const load = () => {
  request.get("/role/page", {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      name: name.value,
    }
  }).then(res => {
    tableData.value = res.records
    total.value = res.total
  })
  request.get("/menu/ids").then(r => {
    ids.value = r.data
  })
}

const handleSizeChange = (size) => {
  pageSize.value = size
  load()
}

const handleCurrentChange = (num) => {
  pageNum.value = num
  load()
}

const save = () => {
  dialogFormVisible.value = true
  form.name = ""
  form.flag = ""
  form.description = ""
}

const saveTure = () => {
  request.post("/role", form).then(res => {
    if (res) {
      ElMessage.success("保存成功")
      dialogFormVisible.value = false
      load()
    } else {
      ElMessage.error("保存失败")
      dialogFormVisible.value = false
      load()
    }
  })
}

const savaFalse = () => {
  menuDialogVis.value = false
  dialogFormVisible.value = false
  form.name = ""
  form.flag = ""
  form.description = ""
}

const edit = (row) => {
  form.name = row.name
  form.flag = row.flag
  form.description = row.description
  dialogFormVisible.value = true
}

const del = (id) => {
  request.delete("/role/" + id).then(res => {
    if (res) {
      ElMessage.success("删除成功")
      load()
    } else {
      ElMessage.error("删除失败")
      load()
    }
  })
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const del2 = () => {
  const ids = multipleSelection.value.map(item => item.id)
  request.post("/user/batch", ids).then(res => {
    if (res) {
      ElMessage.success("批量删除成功")
      load()
    } else {
      ElMessage.error("批量删除失败")
      load()
    }
  })
}

const reset = () => {
  name.value = ""
  load()
}

const selectMenu = (role) => {
  roleId.value = role.id
  roleFlag.value = role.flag

  // 请求菜单数据
  request.get("/menu").then(res => {
    menuData.value = res.data
    console.log(menuData.value)
    // 把后台返回的菜单数据处理成 id数组
    expends.value = menuData.value.map(v => v.id)
  })
  request.get("/role/roleMenu/" + roleId.value).then(res => {
    checks.value = res.data
    ids.value.forEach(id => {
      if (!checks.value.includes(id)) {
        // 可能会报错：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setChecked')
        nextTick(() => {
          tree.value.setChecked(id, false)
        })
      }
    })
  })
  menuDialogVis.value = true
}

const handleEdit = (row) => {
  form.name = row.name
  form.flag = row.flag
  form.description = row.description
  dialogFormVisible.value = true
}

onMounted(() => {
  load()
})
</script>

<template>
  <page-container>
    <div>
      <div style="margin: 10px 0">
        <el-input
          style="width: 200px; margin-right: 20px;"
          placeholder="请输入名称"
          suffix-icon="el-icon-search"
          v-model="name"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
      <div style="margin: 10px 0">
        <el-button type="primary" @click="save">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          title="这是一段内容确定删除吗？"
          @confirm="del2"
        >
          <template #reference>
            <el-button class="ml-5 mr-5" type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </template>
        </el-popconfirm>
      </div>
      <el-table :data="tableData" header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-button type="info" @click="selectMenu(scope.row)">分配菜单 <i class="el-icon-menu"></i></el-button>
            <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button class="ml-5" type="danger">删除<i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="角色信息" v-model="dialogFormVisible" width="30%">
        <el-form label-width="80px" size="small">
          <el-form-item label="名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="唯一标识">
            <el-input v-model="form.flag" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="savaFalse">取 消</el-button>
            <el-button type="primary" @click="saveTure">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog title="菜单分配" v-model="menuDialogVis" width="30%">
        <el-tree
          :props="props"
          :data="menuData"
          ref="tree"
          show-checkbox
          :default-expanded-keys="expends"
          :default-checked-keys="checks"
          node-key="id"
        >
          <!-- 使用 <template> 包裹 v-slot 内容 -->
          <template #default="{ data }">
            <span class="custom-tree-node">
              <i :class="data.icon"></i> {{ data.name }}
            </span>
          </template>
        </el-tree>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="savaFalse">取 消</el-button>
            <el-button type="primary" @click="saveMenuRole">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </page-container>
 
</template>

<style scoped>
/* 你的样式 */
</style>